<template>
  <div class="w1 h1 main_content">
    <div class="search-content">
      <Col class="panel search-panel"
        :span="24"
        style="margin-bottom: 20px;">
      <Form :model="formHeader"
        :label-width="80"
        inline>
        <FormItem label="事件状态：">
          <RadioGroup v-model="formHeader.type"
            type="button">
            <Radio label="">全部</Radio>
            <!-- <Radio label="1">正常</Radio> -->
            <Radio label="2">预警</Radio>
            <Radio label="3">告警</Radio>
            <Radio label="4">故障</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="处理状态：">
          <RadioGroup v-model="formHeader.state"
            type="button">
            <Radio label="">全部</Radio>
            <Radio label="0">未处理</Radio>
            <Radio label="1">已处理</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="margin-left-20">
          <Button type="primary"
            @click.native="_requireThing">查询</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="scroll__content alarm_content">
      <Row class="scroll-content__row">
        <!-- 表格 -->
        <Col class="panel table-panel"
          :span="24"
          style="overflow-x: auto;">
        <Table :columns="userRole=='ROLE_DEMO'?columnsOfDemo: columns"
          :data="tableData"
          border
          :loading="pageInfo.loading"></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel cf"
          :span="24"
          style="margin-bottom:10px;">
        <Page :total="pageInfo.total"
          show-total
          class="fr"
          @on-change="switchThePaging"
          :page-size="15"
          :current.sync="pageInfo.page"></Page>
        </Col>
        <Col :span="24"
          class="page-bottom">
        </Col>
        <!-- 新增通知 -->
        <Modal v-model="dialog.add"
          title="新增通知记录"
          width="400">
          <Row>
            <Col span="24">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备名称：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.deviceName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">所属企业：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.companyName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">事件详情：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.content}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">发生时间：</dt>
              <dd class="basicInfo-item value">
                {{filterTime(selectRow.createdAt)}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">处理人：</dt>
              <dd class="basicInfo-item value">
                {{userName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">处理意见：</dt>
              <dd class="basicInfo-item value"
                style="width: 65%;">
                <Input type="textarea"
                  :rows="4"
                  placeholder="请输入处理意见"
                  v-model="chuliyijian"></Input>
              </dd>
            </dl>
            </Col>
          </Row>
          <div slot="footer">
            <Button @click="dialog.add = false;">取消</Button>
            <Button type="primary"
              @click.native="confirmAddNewAlarm"
              :disabled="addNewDisabled">确认</Button>
          </div>
        </Modal>
        <!-- 后续通知 -->
        <Modal v-model="dialog.edit"
          width="400"
          :closable="false"
          :styles="{top: '20px'}">
          <Row>
            <h2>通知记录</h2>
            <Col span="24">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备名称：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.deviceName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">所属企业：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.companyName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">事件详情：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.content}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">发生时间：</dt>
              <dd class="basicInfo-item value">
                {{filterTime(selectRow.createdAt)}}
              </dd>
            </dl>
            </Col>
            <Col span="24"
              style="margin-top: 10px;">
            <Table :columns="noticeCol"
              :data="noticeList"></Table>
            </Col>
            <!-- <Col span="24" style="margin-top: 10px;text-align: center;">
            <Button @click="dialogOfFooter=true">新增后续通知</Button>
            </Col> -->
          </Row>
          <div slot="footer">
            <Row style="text-align: left;"
              v-if="dialogOfFooter">
              <h2>新增后续通知</h2>
              <Col span="24">
              <dl class="basicInfo-block cf">
                <dt class="basicInfo-item name">处理人：</dt>
                <dd class="basicInfo-item value">
                  {{selectRow.contactName}}
                </dd>
              </dl>
              <dl class="basicInfo-block cf">
                <dt class="basicInfo-item name">处理意见：</dt>
                <dd class="basicInfo-item value"
                  style="padding: 0;width: 65%;">
                  <Input type="textarea"
                    :rows="4"
                    placeholder="请输入处理意见..."
                    v-model="chuliyijian"></Input>
                </dd>
              </dl>
              </Col>
              <Col span="24"
                style="text-align: center;margin-top: 20px;">
              <Button @click="dialog.edit = false;">取消</Button>
              <Button type="primary"
                @click="confirmAddNewAlarmAgain"
                :disabled="addNewDisabled1">新增</Button>
              </Col>
            </Row>
          </div>
        </Modal>
      </Row>
    </div>
  </div>
</template>
<script>
import {
  getAlarmEventList,
  addNewAlarm,
  getAlarmNoticeList,
  editState,
  processSilent
} from '@/api'

import { mapGetters, mapState } from 'vuex'
import PermissionMixin from '../PermissionMixin'

export default {
  mixins: [PermissionMixin],
  mounted() {
    const { id } = this.$route.params
    this._getAlarmEventList(id)
  },
  data() {
    return {
      params: {
        companyId: ''
      },
      addNewDisabled: false,
      addNewDisabled1: false,
      chuliyijian: '',
      dialogOfFooter: false,
      noticeList: [],
      noticeCol: [
        {
          title: '通知人',
          align: 'center',
          key: 'noticeUser'
        },
        {
          title: '通知内容',
          key: 'noticeContent',
          align: 'center'
        },
        {
          title: '通知时间',
          align: 'center',
          render: (h, params) => {
            const time = params.row.noticeDate
            return h('span', this.filterTime(time))
          }
        }
      ],
      formHeader: {
        type: '',
        state: '',
        name: ''
      },
      dialog: {
        add: false,
        edit: false
      },
      pageInfo: {
        page: 1,
        total: 0,
        loading: false
      },
      tableData: [],
      selectRow: {},

      columnsOfDemo: [
        {
          title: '类型',
          align: 'center',
          width: 85,
          render: (h, params) => {
            const _t = this
            const type = params.row.type
            return _t.filterType(h, type)
          }
        },
        {
          title: '设备名称',
          key: 'deviceAlias',
          align: 'center',
          disabled: true,
          width: 150
        },
        {
          title: '事件详情',
          key: 'content',
          align: 'center'
        },
        {
          title: '是否处理',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const disposed = params.row.disposed
            return h('span', disposed ? '否' : '是')
          }
        },
        {
          title: '事件时间',
          align: 'center',
          width: 140,
          render: (h, params) => {
            const time = params.row.createdAt
            return h('span', this.filterTime(time))
          }
        },
        {
          title: '处理时间',
          align: 'center',
          width: 120,
          render: (h, params) => {
            const _t = this
            const row = { ...params.row }
            if (!row.disposed) return h('span', '未处理')
            return h(
              'span',
              _t.moment(row.updatedAt).format('YYYY-MM-DD HH:mm:ss')
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          render: (h, params) => {
            const row = { ...params.row }
            let domArr = []
            const _t = this
            let btnXiaoSheng = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                  disabled: true
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t.deviceMuffler(row)
                  }
                }
              },
              '消声'
            )
            let tongZhi = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                  disabled: true
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t._noticeThing(row)
                  }
                }
              },
              '通知'
            )
            let tongzhijilu = h(
              'Button',
              {
                props: {
                  type: 'success',
                  size: 'small',
                  disabled: true
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t._historyNoticeThing(row)
                  }
                }
              },
              '通知记录'
            )

            let chuLi = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small',
                  disabled: row.disposed || this.userRole == 'ROLE_DEMO'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t.dealWith(row)
                  }
                }
              },
              '处理'
            )

            domArr.push(chuLi)
            if (row.type != 2) {
              domArr.push(btnXiaoSheng)
            }
            if (!!row.inform) {
              domArr.push(tongzhijilu)
            }
            return h('div', domArr)
          }
        }
      ],

      columns: [
        {
          title: '类型',
          align: 'center',
          width: 85,
          render: (h, params) => {
            const _t = this
            const type = params.row.type
            return _t.filterType(h, type)
          }
        },
        {
          title: '设备名称',
          key: 'deviceName',
          align: 'center',
          width: 150
        },
        {
          title: '事件详情',
          key: 'content',
          align: 'center'
        },
        {
          title: '是否处理',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const disposed = params.row.disposed
            return h('span', disposed ? '是' : '否')
          }
        },
        {
          title: '事件时间',
          align: 'center',
          width: 140,
          render: (h, params) => {
            const time = params.row.createdAt
            return h('span', this.filterTime(time))
          }
        },

        {
          title: '处理时间',
          align: 'center',
          width: 120,
          render: (h, params) => {
            const _t = this
            const row = { ...params.row }
            if (!row.disposed) return h('span', '未处理')

            return h(
              'span',
              _t.moment(row.updatedAt).format('YYYY-MM-DD HH:mm:ss')
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          render: (h, params) => {
            const row = { ...params.row }
            let domArr = []
            const _t = this
            let btnXiaoSheng = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                  disabled: row.silent
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t.deviceMuffler(row)
                  }
                }
              },
              '消声'
            )
            let tongZhi = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t._noticeThing(row)
                  }
                }
              },
              '通知'
            )
            let tongzhijilu = h(
              'Button',
              {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t._historyNoticeThing(row)
                  }
                }
              },
              '通知记录'
            )

            let chuLi = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small',
                  disabled: row.disposed
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    _t.dealWith(row)
                  }
                }
              },
              '处理'
            )

            domArr.push(chuLi)
            if (row.type != 2) {
              domArr.push(btnXiaoSheng)
            }
            if (!!row.inform) {
              domArr.push(tongzhijilu)
            }
            return h('div', domArr)
          }
        }
      ]
    }
  },
  methods: {
    // 查询事件
    _requireThing() {
      let vm = this
      vm.pageInfo.page = 1
      this._getAlarmEventList()
    },

    // 分页
    switchThePaging(index) {
      let vm = this
      vm.pageInfo.page = index
      vm._getAlarmEventList()
    },

    // 过滤时间
    filterTime(time) {
      return this.moment(time).format('YYYY-MM-DD HH:mm:ss')
    },

    // 根据 state 返回不同的标签
    filterType(h, type) {
      switch (type) {
        case 1:
          return h(
            'Tag',
            {
              props: {
                color: 'green'
              }
            },
            '正常'
          )
          break
        case 2:
          return h(
            'Tag',
            {
              props: {
                color: 'yellow'
              }
            },
            '预警'
          )
          break
        case 3:
          return h(
            'Tag',
            {
              props: {
                color: 'red'
              }
            },
            '告警'
          )
          break
        case 4:
          return h(
            'Tag',
            {
              props: {
                color: 'grey'
              }
            },
            '故障'
          )
          break
      }
    },

    // 获取报警事件列表
    async _getAlarmEventList(id) {
      const vm = this
      vm.pageInfo.loading = true
      const companyId = vm.companyId
      let params = {
        companyId,
        page: vm.pageInfo.page,
        size: 15,
        type: vm.formHeader.type,
        state: vm.formHeader.state
      }
      if (id) {
        params = { id: id, page: vm.pageInfo.page, size: 15 }
      }
      await getAlarmEventList(params).then(res => {
        if (res.code == 200) {
          vm.tableData = res.data.list
          vm.pageInfo.total = res.data.total
          setTimeout(() => {
            vm.pageInfo.loading = false
          }, 500)
        }
      })
    },

    // 打开通知
    _noticeThing(row) {
      let vm = this
      vm.dialog.add = true
      vm.$nextTick(() => {
        vm.chuliyijian = ''
        vm.selectRow = { ...row }
      })
    },

    // 确定通知
    confirmAddNewAlarm() {
      const vm = this
      this.addNewDisabled = true

      const params = {
        exceptionId: vm.selectRow.id,
        content: vm.chuliyijian
      }
      addNewAlarm(params).then(res => {
        if (res.code == 200) {
          vm.$Message.success('操作成功')
          vm.chuliyijian = ''
          vm.dialog.add = false
          this.addNewDisabled = false
          vm._getAlarmEventList()
        } else {
          this.addNewDisabled = false
          vm.$Message.error(res.message)
        }
      })
    },

    // 获取事件通知列表
    _getAlarmNoticeList() {
      const _t = this
      const params = {
        exceptionId: _t.selectRow.id
      }
      getAlarmNoticeList(params).then(res => {
        if (res.code == 200) {
          this.noticeList = res.data
        }
      })
    },

    _historyNoticeThing(row) {
      this.selectRow = row
      this.dialog.edit = true
      this.dialogOfFooter = false
      this._getAlarmNoticeList()
    },

    // 确定再次增加通知
    confirmAddNewAlarmAgain() {
      let vm = this
      this.addNewDisabled1 = true
      const params = {
        exceptionId: vm.selectRow.id,
        content: vm.chuliyijian
      }
      addNewAlarm(params).then(res => {
        if (res.code === 200) {
          vm.$Message.success('操作成功')
          vm.chuliyijian = ''
          vm.dialog.edit = false
          this.addNewDisabled1 = false
          vm.dialogOfFooter = false
          vm._getAlarmEventList()
        } else {
          this.addNewDisabled1 = false
        }
      })
    },

    // 消声操作
    deviceMuffler(row) {
      let vm = this
      vm.$set(vm.tableData[row._index], 'silent', true)
      vm.$Message.info('操作进行中...')
      processSilent(row.id).then(res => {
        if (res.code != 200) {
          vm.$set(vm.tableData[row._index], 'silent', false)
          vm.$Message.error(res.message)
          vm._getAlarmEventList()
        } else {
          vm._getAlarmEventList()
          vm.$Message.success('操作成功')
        }
      })
    },

    // 处理
    dealWith(row) {
      let vm = this
      vm.$set(vm.tableData[row._index], 'disposed', false)
      vm.$Message.info('操作进行中...')
      editState(row.id).then(res => {
        if (res.code === 200) {
          vm.$Message.success('操作成功')
          vm._getAlarmEventList()
        } else {
          vm.$set(vm.tableData[row._index], 'disposed', true)
          vm.$Message.error(res.message)
          vm._getAlarmEventList()
        }
      })
    }
  }
}
</script>
